<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>

<style type="text/css">
	.autocomplete-suggestions {
		border: 1px solid #999;
		background: #FFF;
		overflow: auto;
	}

	.autocomplete-suggestion {
		padding: 2px 5px;
		white-space: nowrap;
		overflow: hidden;
	}

	.autocomplete-selected {
		background: #F0F0F0;
	}

	.autocomplete-suggestions strong {
		font-weight: normal;
		color: #3399FF;
	}

	@-moz-document url-prefix() {
		fieldset {
			display: table-cell;
		}
	}

	.recommendInput {
		width: 84px;
		height: 24px;
	}

</style>
<title>推荐订单完成率 - 云超市</title>


<div class="row" id="app">
	<form class="form-inline" style="margin-top: 20px; margin-bottom: 5px;">
		<div class="form-group">
			<input id="barNameInput" class="form-control input-sm" type="text" placeholder="请选择烟品">
		</div>
		<div class="form-group">
			<input id="yearMothInput" class="form-control input-sm" type="text" placeholder="请选择年月">
		</div>
		<button type="button" class="btn btn-sm btn-success" @click="getOrder();">查询</button>
		<button type="button" class="btn btn-sm btn-primary" @click="saveData();">保存增长率</button>
		<button type="button" class="btn btn-sm btn-info" @click="addRecommend()">添加品规</button>
	</form>

	<div class="row" style="background-color: rgb(53, 147, 202);margin-right: 0px;margin-left: 0px; height: 37px;">
		<div class="col-sm-10" style="margin-top: 6px;">
			<strong style="font-size: 18px;color: #f9f9f9;">推荐订单完成率列表</strong>
		</div>
		<div class="col-sm-2" style="text-align: right">

		</div>
	</div>
	<div class="table-responsive" id="tableContainer" style="height: 365px">
		<table class="table table-striped table-condensed table-bordered">
			<thead style="background-color:#eee;">
			<tr>
				<th><button @click="clickAllSB();">{{isAllS ? '全不选' : '全选'}}</button></th>
				<th>烟品编码</th>
				<th>烟品名称</th>
				<th>年月</th>
				<th>月同期数量(条)</th>
				<th>本月已购量(条)</th>
				<th>增长率</th>
			<%--<th>推荐数量(条)</th>--%>
				<th>完成率</th>
				<%--<th>操作时间</th>--%>

			</tr>
			</thead>
			<tbody>

			<tr v-for="(order, index) in orderList">
				<td><input type="checkbox" v-model="order.CHECK"></td>
				<td>{{order.BAR_CODE}}</td>
				<td>{{order.PRODUCT_NAME}}</td>
				<td>{{order.YEAR_MOTH}}</td>
				<td>{{order.TCP_NUM}}</td>
				<td>{{order.CURRENT_ALREADY}}</td>
				<td onclick="clickRecommendNum(this);">
					<span>{{order.GROWTH_RATE}}</span>
					<input min="0" onclick="stopD()" onblur="$(this).parent().click()" type="number" class="recommendInput hide" v-model="order.GROWTH_RATE">
				</td>
				<%--<td>{{order.RECOMMEND_NUM}}</td>--%>
				<td>{{computePC(order.TCP_NUM,order.CURRENT_ALREADY,order.GROWTH_RATE)}}</td>
				<%--<td>{{order.OPERATOR_TIME}}</td>--%>
			</tr>
			</tbody>
		</table>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" data-backdrop="static" role="dialog"
		 aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">添加品规的增长率</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" role="form">
						<div class="form-group">
							<label class="col-sm-3 control-label">品规：</label>
							<div class="col-sm-8">
								<select class="form-control" id="add_bar_code" v-model="add_select_prod">
									<option value="">——请选择品规——</option>
									<option v-for="prod in prods" :value="prod.data">
										{{prod.value}}
									</option>
								</select>
								<%--<input class="form-control" id="add_bar_code" placeholder="请输入烟品条条码">--%>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">年月：</label>
							<div class="col-sm-8">
								<input class="form-control" id="add_yearMoth" placeholder="请选择年月">
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label">增长率：</label>
							<div class="col-sm-8">
								<input class="form-control" id="add_gr" placeholder="输入增长率">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" @click="submitData">确定</button>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="${contextPath}/static/statistics/js/vue.js"></script>
<script type="text/javascript" src="${contextPath}/static/statistics/js/jquery.autocomplete.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    var laypage = layui.laypage
        , layer = layui.layer;

    var app = new Vue({
        el: '#app',
        data: {
            isAllS : false,
            orderList: [],
            customers: [],
            prods: [],
            add_select_prod: ''
        },
        methods: {
            getInitData: function () {
                var vm = this;
                $.ajax({
                    url: '${contextPath}/shop/getRecommendCustAndProdData',
                    type: 'get',
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        if (data.success) {
                            vm.customers = data.data.customers;
                            vm.prods = data.data.prods;
                            $('#barNameInput').autocomplete({
                                lookup: vm.prods,
                                minChars: 0,
                            });
                        } else {
                            layer.msg('获取客户和烟品信息失败失败');
                        }

                    },
                    error: function (error) {
                        if (window.console) console.error(error);
                        layer.msg('网络错误');
                    }
                });

                $('#yearMothInput').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });

                $('#add_yearMoth').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn: 1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 3,
                    forceParse: 0,
                    minView: 3,
                    showMeridian: 1,
                    format: "yyyy-mm",
                });


            },
            submitData: function () {
                var barCode = $("#add_bar_code").val();
                var yearMoth = $("#add_yearMoth").val();
                var gr = $("#add_gr").val();

                if (!barCode) {
                    layer.msg('请选择烟品品规');
                    return;
                }
                if (!yearMoth) {
                    layer.msg('请输入年月');
                    return;
                }
                if (!gr) {
                    layer.msg('请输入增长率');
                    return;
                }
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/addRecommendDataGR',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        stringMap: {
                            BAR_CODE : barCode,
                            YEAR_MOTH : yearMoth,
                            GROWTH_RATE : gr,
                        }
                    },
                    //async : false,
                    success: function (data) {
                        layer.closeAll('loading');
                        layer.msg(data.message);
                        if (data.success) {
                            $('#myModal').modal('hide')
                        }

                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        if (window.console) console.error(error);
                        layer.msg('网络错误');
                    }
                });


            },
            getOrder: function () {
                var vm = this;

                var barName = $("#barNameInput").val();
				var yearMoth = $("#yearMothInput").val();
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/getRecommendOrderGRList',
                    type: 'post',
                    data: {
                        stringMap: {
							barName: barName,
                            yearMoth: yearMoth,
                        },
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (data.success == false) {
                            layer.msg("获取出错：" + data.message)
                            return
                        }
                        //console.log(data)
                        var rData = data.data;
                        if (rData.length == 0) {
                            layer.msg("查询没有数据")
                        }
                        app.orderList = rData;
                        app.isAllS = false;
                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        if (window.console) console.log(error)
                    }
                })
            },
            revocation: function (index) {
                var indx = layer.confirm('确定要撤销吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    console.log(app.orderList[index])
                    layer.close(indx);
                    layer.load(1)
                    //修改订单状态
                    $.ajax({
                        url: '${contextPath}/shop/revocationCourier',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            stringMap: app.orderList[index]
                        },
                        success: function (data) {
                            layer.closeAll('loading');
                            layer.msg(data.message);
                            if (data.success) {
                                app.getOrder();
                            }
                        },
                        error: function (error) {
                            layer.msg("网络错误");
                            layer.closeAll('loading')
                        }
                    });
                }, function () {
                });
            },
            clickAllSB : function () {
                this.isAllS = !this.isAllS;
                for (var index in this.orderList) {
                    this.orderList[index].CHECK = this.isAllS
                }

            },
            saveData : function () {
                var saveDs = [];
                for (var index in this.orderList) {
                    var order = this.orderList[index];
                    if (order.CHECK) {
                        saveDs.push(order)
                    }
                }
                if (saveDs.length == 0) {
                    layer.msg('请至少选择一条需要保存的数据')
                    return;
                }
                layer.load(1);
                $.ajax({
                    url: '${contextPath}/shop/updateRecommendOrderGR',
                    type: 'post',
                    data: {
                        data : JSON.stringify(saveDs),
                    },
                    success: function (data) {
                        layer.closeAll('loading')
                        if (!data.success) {
                            layer.msg("保存出错：" + data.message)
                            return
                        }
                        layer.msg('保存成功');

                    },
                    error: function (error) {
                        layer.closeAll('loading');
                        layer.msg('网络错误');
                        if (window.console) console.log(error)
                    }
                })
            },
            saveDataAs :function () {

                var custCode = $("#custCodeInput").val();
                if (!custCode) {
                    layer.msg('请选择专卖证号');
                    return;
                }
                var year = $("#yearInput").val();
                if (!year) {
                    layer.msg('请选择年');
                    return;
                }
                var week = $("#weekInput").val();
                if (!week) {
                    layer.msg('请选择年周');
                    return;
                }

                var title = "<div>将列表中选中品规推荐量存到</div>" + "<div>客户：" + "<span style='color: #0aa5df'>" +custCode + "</span>" + "</div>"   + "<div>" +  "<span style='color: #0aa5df'>" + year +"</span>" + "年，第" +  "<span style='color: #0aa5df'>" + week +"</span>" + "周" + "</div>";

                var indx = layer.confirm(title, {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    layer.close(indx);
                    app.saveData(custCode,year,week);
                }, function () {
                });
            },
            computePC : function (tcp, ca, gr) { //这是个方法，却可以根据实参的变化而被动态调用，从而返回新的值，在显示处体现出来
				if (tcp && tcp != '0' && gr) {
					return (ca / (tcp * gr) *100).toFixed(2) + '%'
                }
                return ''
            },
            addRecommend : function () {

                var barName = $("#barNameInput").val();
                var add_select_prod = '';
                for(var index in this.prods) {
                    var prod = this.prods[index];
					if (prod.value == barName) {
                        add_select_prod = prod.data
						break;
                    }
                }
                this.add_select_prod = add_select_prod;

                var yearMoth = $("#yearMothInput").val();
                $("#add_yearMoth").val(yearMoth);
                $('#myModal').modal('show')
            }

        },
        watch: {
        }
    })
    app.getInitData();
    //app.getOrder();


    function clickRecommendNum(vm) {
        var $span = $(vm).children("span:first-child");
        var $input = $(vm).children("input:last-child");
        if ($span.hasClass("hide")) {
            $span.removeClass("hide")
            $input.addClass("hide")
        } else {
            $span.addClass("hide")
            $input.removeClass("hide");
            $input.focus();
        }
    }

    function stopD() {
        cancelBubble();
    }

    function cancelBubble(e) {
        var evt = e ? e : window.event;
        if (evt.stopPropagation) {        //W3C
            evt.stopPropagation();
        } else {       //IE
            evt.cancelBubble = true;
        }
    }
</script>


